<template>
	<view class="my-page-con">
		<view class="my-page-content">
			<view class="my-s-title">护照号码</view>
			<input maxlength="10" class="my-select-class mb40" type="text" v-model="formData.passport_no"
				placeholder="必填,请输入" />

			<view class="my-s-title">
				<view class="flex-between mb20">
					<span>护照照片 <span class="grey-tips ml10">至少上传一张</span> </span>
					<span @click="showImg" class="color-orange">示例</span>
				</view>
				<ljs-dragImages v-model="formData.passport_pics" :count="20" @uploadFile="upload">
				</ljs-dragImages>


			</view>
		</view>
		<footBtn v-if="!(pageData && pageData.pageType == 1)" btnText="确定" @nextStep="nextStep"></footBtn>
	</view>
</template>

<script>
	import footBtn from '@/components/myBtn/footBtn.vue';
	export default {
		components: {
			footBtn,
		},
		data() {
			return {
				formData: {
					passport_no: '', //		是	string	护照号码
					passport_pics: [], //		是	array	护照照片数组
				},
				pageData: ''
			}
		},
		onLoad(data) {
			this.pageData = data;
			this.init(data);
		},

		methods: {
			init() {
				this.getFormData();
			},
			getFormData() {
				let data = this.$getStorage('userInfo');
				if (this.pageData && this.pageData.pageType == 1) { //1 订单详情  2 其他
					data = this.$getStorage('orderData');
					data.passport_no = data.passport
				}
				let imgList = [];
				data.passport_pics.forEach((item,index)=>[
					imgList.push({
						url: data.passport_pic_urls[index],
						image_path: item
					})
				])
				this.formData = {
					passport_no: data.passport_no,
					passport_pics: imgList
				};

			},
			showImg() {
				uni.previewImage({
					urls: ['https://vihome.s3.ca-central-1.amazonaws.com/mini-app-static/passport-sample.jpg'],
				})
			},
			upload(files) {
				let num = 0;
				let totalNum = 0;
				uni.showLoading({
					title: '上传中',
					mask: true // 显示透明遮罩
				});
				this.formData.passport_pics.forEach((i, index, arr) => {
					{
						if (!i.image_path) {
							const fileUrl = i.url;
							totalNum += 1;
							const data = [{
									name: 'file',
									url: fileUrl
								},
								{
									type: 'passport'
								}
							];
							this.$uploadFile(...data).then(res => {
								num += 1;
								if (num == totalNum) {
									uni.hideLoading();
									this.$forceUpdate();
								}
								this.formData.passport_pics[index].image_path = res.filepath;
							})
						}

					}
				})
			},
			getUserInfo() {
				this.$http.getUserInfo().then(res => {
					this.$setStorage('userInfo', res)
				})
			},
			nextStep() {
				if (!this.formData.passport_no) {
					this.$toast('请填写护照号码')
					return;
				}
				if (this.formData.passport_pics.length == 0) {
					this.$toast('请上传护照照片')
					return;
				}
				let data = {
					passport_no: this.formData.passport_no, //		是	string	护照号码
					passport_pics: this.formData.passport_pics.map(item => item.image_path), //		是	array	护照照片数组
				}
				
				this.$http.editUserInfo(data).then(res => {
					this.$toast('修改成功');
					this.getUserInfo();
					uni.navigateBack({
						delta: 1,
						fail: () => {
							// uni.switchTab({
							//     url: '/pages/index/index'
							// });
						}
					});
				})

			}
		}
	}
</script>

<style>
</style>